import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import FilterLink from '../containers/FilterLink';
import { VisibilityFilters } from '../actions';

const Footer = () => (
  <View style={styles.center}>
    <Text>Show: </Text>
    <FilterLink filter={VisibilityFilters.SHOW_ALL}>
      <Text>All</Text>
    </FilterLink>
    <FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>
      <Text>Active</Text>
    </FilterLink>
    <FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>
      <Text>Completed</Text>
    </FilterLink>
  </View>
);

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: 'center',
  },
});

export default Footer;
